<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="material-store-pay-dialog" v-if="visible">
                <div class="material-store-pay-dialog__mask" @click="onClose"></div>

                <div class="material-store-pay-dialog__content">
                    <img class="left-image" :src="`${_oss_}images/material-store/pay-bg.png`" />

                    <div class="right-content">
                        <img class="icon-close" :src="`${_oss_}images/material-store/icon-close-2.png`" @click="onClose" />

                        <div class="top-box">
                            <Swiper @swiper="(ref) => (swiperRef = ref)" :modules="[Autoplay, Pagination]"
                                @slideChange="onSlideChange">
                                <SwiperSlide v-for="store in info.store" :key="store">
                                    <div class="top-item">
                                        <img class="cover-image" :src="store.thumb_file" />

                                        <div class="right">
                                            <div class="title">
                                                {{ store.name }}
                                            </div>

                                            <div class="publisher">
                                                发布人：华锐云空间
                                            </div>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            </Swiper>

                            <div class="page" v-if="info.store.length > 1">
                                {{ activeIndex + 1 }} / {{ info.store.length }}
                            </div>

                            <div class="right-bottom">
                                <div class="copyright" @click="
                                    dialogStore.isReleaseNoteDialog = true
                                    ">
                                    版权说明
                                    <img class="icon-question-mark"
                                        :src="`${_oss_}images/material-store/icon-question-mark.png`" />
                                </div>

                                <div class="disclaimer" @click="
                                    dialogStore.isBuyTemplateProtocolDialog = true
                                    ">
                                    免责说明
                                    <img class="icon-question-mark"
                                        :src="`${_oss_}images/material-store/icon-question-mark.png`" />
                                </div>
                            </div>
                        </div>

                        <div class="main-box">
                            <div class="left">
                                <div class="form">
                                    <div class="form-item">
                                        <div class="form-item__label">
                                            支付方式
                                        </div>
                                        <div class="form-item__value">
                                            <div class="radio-group">
                                                <template v-for="item in typeList" :key="item.value">
                                                    <div class="radio-item" :class="{
                                                        active:
                                                            item.value ===
                                                            form.type,
                                                    }" @click="
    setType(
        'type',
        item.value
    )
    " v-if="item.value != 2 ||
        isShowScore
        ">
                                                        <div class="radio-item--icon"></div>
                                                        <div class="radio-item--text">
                                                            {{ item.label }}
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-item coupon-item">
                                        <div class="form-item__label">优惠</div>
                                        <div class="form-item__value">
                                            <el-select placeholder="暂无优惠可用" style="width: 220px" :style="{
                                                '--el-color-primary':
                                                    '#ff4941',
                                            }">
                                                <template #empty>
                                                    <div class="no-coupon">
                                                        无优惠
                                                    </div>
                                                </template>
                                            </el-select>
                                            <!-- <div class="btn-coupon">获取</div> -->
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <div class="form-item__label">
                                            付款方式
                                        </div>
                                        <div class="form-item__value">
                                            <div class="radio-button-group">
                                                <div class="radio-button" v-for="item in payMethodList[
                                                    form.type
                                                ]" :key="item.value" :class="{
    active:
        form.payMethod ===
        item.value,
}" @click="
    setType(
        'payMethod',
        item.value
    )
    ">
                                                    {{ item.label }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <div class="form-item__label">
                                            {{
                                                { 1: "价格", 2: "积分兑换" }[
                                                    form.type
                                                ]
                                            }}
                                        </div>
                                        <div class="form-item__value">
                                            <span class="price">
                                                <span class="unit" v-if="form.type == 1">￥</span>{{
                                                    form.type == 1
                                                    ? info.price
                                                    : info.integral
                                                }}<span class="score-unit" v-if="form.type == 2">积分</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="right" v-if="form.type == 1">
                                <div class="qrcode-box">
                                    <img :src="QrCodeUrl" />
                                    <div class="qrcode-mask" v-if="!isChecked">
                                        <div class="mask-text-1">
                                            支付前请阅读
                                        </div>

                                        <el-link type="primary" @click="() => {
                                            dialogStore.isBuyTemplateProtocolDialog = true;
                                            isChecked = true;
                                        }
                                            " class="mask-text-2" style="
                                                --el-color-primary: #8c560b;
                                                --el-link-hover-text-color: #8c560b;
                                            ">
                                            《购买协议》
                                        </el-link>
                                    </div>
                                </div>

                                <div class="pay-amount">
                                    实付金额：{{ info.price }}元
                                </div>
                            </div>
                        </div>

                        <div class="bottom-box" :class="'bottom-box-' + form.type">
                            <template v-if="form.type == 1">
                                <el-checkbox label="已阅读并同意" v-model="isChecked" style="--el-color-primary: #ff4941" />
                                <el-link type="primary" @click="
                                    dialogStore.isBuyTemplateProtocolDialog = true
                                    " style="
                                        --el-color-primary: #ff4941;
                                        --el-link-hover-text-color: #ff4941;
                                    ">
                                    《购买协议》
                                </el-link>
                            </template>

                            <template v-else>
                                <div class="total-score">
                                    剩余积分：{{ userStore.midNum.score_num }}
                                </div>

                                <div class="get-score-btn" @click="GoToScorePage()">
                                    立即参与活动获取积分
                                </div>
                            </template>

                            <!-- 立即支付 -->
                            <div class="pay-btn" @click="onScoreExchange" v-if="form.type == 2">
                                {{ "立即兑换" }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { GetStorePay, StoreExchange, GetOrderStatus } from "~/api";
import QRCode from "qrcode";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

const emits = defineEmits(["success"]);
const visible = ref(false);
const isChecked = ref(false);
const dialogStore = useDialogStore();
const userStore = useUserStore();
const reqUrl = useRequestURL();
const info = ref({});
const QrCodeUrl = ref("");
const isShowScore = ref(false);
const swiperRef = ref(null);
const activeIndex = ref(0);
const opts = {
    errorCorrectionLevel: "H",
    type: "image/jpeg",
    quality: 0.8,
    margin: 0,
    color: {
        dark: "#000",
        light: "#fff",
    },
};
const form = reactive({
    type: 1,
    payMethod: 1,
});
let timer = null;
const typeList = reactive([
    {
        label: "人民币",
        value: 1,
    },
    {
        label: "积分兑换",
        value: 2,
    },
]);

const payMethodList = reactive({
    1: [
        {
            label: "微信支付",
            value: 1,
        },
        {
            label: "支付宝",
            value: 2,
        },
    ],
    2: [
        {
            label: "积分",
            value: 1,
        },
        // {
        //     label: "提现额",
        //     value: 2,
        // },
    ],
});

const publisher = computed(() => {
    if (info.value.store[0].consumer_id) {
        return info.value.store[0].publisher || "-";
    } else {
        return "华锐云空间";
    }
});

const refreshOrder = () => {
    timer = setTimeout(async () => {
        const res = await GetOrderStatus({
            order_no: info.value.order_no,
            type: 4,
        });

        if (res.data == 1) {
            Message().success({
                message: "支付成功！",
                duration: 1500,
            });
            onClose();
            emits("success");
        } else {
            refreshOrder();
        }
    }, 3000);
};

const onClose = () => {
    visible.value = false;
    info.value = {};
    QrCodeUrl.value = "";
    form.type = 1;
    form.payMethod = 1;

    if (timer) {
        clearTimeout(timer);
    }
};

const GoToScorePage = () => {
    navigateTo("/admin/score.html", {
        open: true,
    });
};

const setType = (name, value) => {
    if (name == "type") {
        form.payMethod = 1;
    }
    form[name] = value;
};

// 积分兑换
const onScoreExchange = async () => {
    const res = await StoreExchange({
        order_no: info.value.order_no,
    });

    if (res.code == 200) {
        Message().success("兑换成功");
        emits("success");
        onClose();
        GET_MIDNUM();
    } else {
        Message().warning(res.msg);
    }
};

const setQrcodeUrl = async () => {
    let url =
        reqUrl.origin + "/MaterialStore/pay?order_no=" + info.value.order_no;
    QrCodeUrl.value = await QRCode.toDataURL(url, opts);
};

const onSlideChange = (e) => {
    activeIndex.value = e.activeIndex;
};

defineExpose({
    async show(store_id, showScore) {
        const res = await GetStorePay({
            store_id,
        });
        if (res.code == 200) {
            info.value = res.data;
            isShowScore.value = showScore;
            setQrcodeUrl();
            refreshOrder();
            visible.value = true;
        } else {
            Message().warning(res.msg);
        }
    },
});
</script>
<style lang="scss">
.no-coupon {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #999;
}
</style>

<style lang="scss" scoped>
:root {
    --el-color-primary: green;
}

.material-store-pay-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 900px;
        height: 410px;
        border-radius: 20px;
        display: flex;
        overflow: hidden;

        .left-image {
            width: 280px;
            height: 410px;
        }

        .right-content {
            position: relative;
            width: 620px;
            height: 410px;
            background: linear-gradient(90deg,
                    #fff6d9 0%,
                    #fff9f1 49%,
                    #ffffff 100%);
            padding: 23px 23px 19px 23px;

            .icon-close {
                position: absolute;
                right: 23px;
                top: 23px;
                width: 17px;
                height: 17px;
                cursor: pointer;
                z-index: 1;
            }

            .top-box {
                position: relative;
                display: flex;
                width: 100%;
                padding-bottom: 15px;
                border-bottom: 1px solid #ececec;

                .swiper {
                    width: 65%;
                    margin: 0;

                    :deep(.swiper-pagination-bullets) {
                        &.swiper-pagination-horizontal {
                            width: auto !important;
                            left: initial;
                            bottom: 0;
                            right: 0;
                            transform: translateX(0);
                        }
                    }
                }

                .page {
                    position: absolute;
                    left: 65%;
                    bottom: 15px;
                    color: #888;
                    font-size: 12px;
                    transform: translateX(-100%);
                }

                .top-item {
                    display: flex;

                    .cover-image {
                        width: 100px;
                        height: 66px;
                        margin-right: 17px;
                        flex-shrink: 0;
                        display: block;
                    }

                    .right {
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        width: 100%;

                        .title {
                            font-weight: bold;
                            font-size: 18px;
                            color: #333;
                            line-height: 1em;
                            margin-top: 8px;
                        }

                        .publisher {
                            font-size: 16px;
                            color: #999;
                        }
                    }
                }

                .right-bottom {
                    display: flex;
                    align-items: flex-end;
                    margin-top: 18px;
                    margin-left: auto;

                    .copyright,
                    .disclaimer {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: #999;
                        cursor: pointer;
                    }

                    .disclaimer {
                        margin-left: 19px;
                    }

                    .icon-question-mark {
                        width: 14px;
                        height: 14px;
                        margin-left: 6px;
                    }
                }
            }

            .main-box {
                padding-top: 22px;
                display: flex;

                .radio-group {
                    display: flex;

                    .radio-item {
                        display: flex;
                        align-items: center;
                        margin-right: 30px;
                        cursor: pointer;

                        &.active {
                            color: #ff4941;

                            .radio-item--icon {
                                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/icon-radio-active.png");
                            }
                        }

                        &--text {
                            font-size: 14px;
                            margin-left: 10px;
                        }

                        &--icon {
                            width: 16px;
                            height: 16px;
                            background-size: 100% 100%;
                            background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/icon-radio.png");
                        }
                    }
                }

                .radio-button-group {
                    display: flex;

                    .radio-button {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 102px;
                        height: 30px;
                        border-radius: 4px;
                        margin-right: 16px;
                        font-size: 14px;
                        border-radius: 4px;
                        border: 1px solid #999;
                        cursor: pointer;

                        &.active {
                            position: relative;
                            border: 1px solid #ff4941;
                            color: #ff4941;

                            &::after {
                                position: absolute;
                                right: 0;
                                top: 0;
                                content: "";
                                width: 18px;
                                height: 9px;
                                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/material-store/icon-select-tag.png");
                                background-size: 100% 100%;
                            }
                        }
                    }
                }

                .left {
                    width: 420px;

                    .form-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 30px;

                        &:last-of-type {
                            margin-bottom: 0;
                        }

                        &__label {
                            width: 90px;
                            font-size: 16px;
                            color: #333;
                        }

                        .price {
                            font-weight: bold;
                            font-size: 30px;
                            color: #ff4941;

                            .score-unit {
                                font-size: 18px;
                            }
                        }

                        &.coupon-item {
                            .form-item__value {
                                display: flex;
                                align-items: center;

                                .btn-coupon {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 64px;
                                    height: 30px;
                                    background: #ff4941;
                                    border-radius: 4px;
                                    color: #fff;
                                    margin-left: 10px;
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }

                .right {
                    padding-top: 30px;

                    .qrcode-box {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        width: 177px;
                        height: 177px;
                        background: #fff;
                        border-radius: 12px;
                        border: 1px solid #f3a233;
                        flex-shrink: 0;

                        img {
                            width: 153px;
                            height: 153px;
                        }

                        .qrcode-mask {
                            width: 155px;
                            height: 155px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            background-color: rgba($color: #fff, $alpha: 0.9);
                            transform: translate(-50%, -50%);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .mask-text-1 {
                                font-size: 14px;
                                color: #000000;
                                line-height: 30px;
                                text-align: center;
                            }

                            .mask-text-2 {
                                font-size: 18px;
                                line-height: 30px;
                                text-align: center;
                                cursor: pointer;
                            }
                        }
                    }

                    .pay-amount {
                        text-align: center;
                        font-size: 14px;
                        color: #333;
                        margin-top: 10px;
                    }
                }
            }

            .bottom-box {
                width: calc(100% - 46px);
                position: absolute;
                display: flex;
                align-items: flex-end;
                bottom: 19px;

                :deep(.el-checkbox) {
                    height: auto;

                    .el-checkbox__label {
                        color: #999;
                    }
                }

                &.bottom-box-2 .pay-btn {
                    margin-left: 15px;
                }

                .pay-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 177px;
                    height: 40px;
                    background: linear-gradient(90deg, #ffe48c, #ffcc8c);
                    border-radius: 8px;
                    font-weight: 500;
                    font-size: 16px;
                    color: #8c560b;
                    margin-left: auto;
                    cursor: pointer;
                }

                .total-score {
                    color: #999;
                    font-size: 14px;
                }

                .get-score-btn {
                    margin-left: auto;
                    font-size: 14px;
                    color: #ff4941;
                    line-height: 30px;
                    border-bottom: 1px solid #ff4941;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
